<template>
	<view class="content">
		<navigatorComp title="追思会" bgcColor="#121512" fontColor="#fff">
			<template #rightWrap>
				<view class="edit" @click="goUrl('/subPages/home/memorial_meeting/list')">
					我举行的
				</view>
			</template>
		</navigatorComp>
		<!-- <image src="http://112.124.50.179:8888/imgs/home/meeting_bgc1.png" class="meeting_bgc"></image> -->
		<view style="display: flex; align-items: center; justify-content: center; gap: 56rpx">
			<view
				class="meeting_avater"
				v-for="(item, index) in memoryHallPopup.choosedMemo.peopleList || 1"
			>
				<image class="avater_border" src="http://112.124.50.179:8888/imgs/home/poster_border.png"></image>
				<image
					:src="item.imageUrl || 'http://112.124.50.179:8888/imgs/home/obituary_avater.png'"
					mode=""
					class="deadee_avater"
				></image>
				<image src="http://112.124.50.179:8888/imgs/home/poster_top.png" mode="" class="decoration_top"></image>
				<image src="http://112.124.50.179:8888/imgs/home/poster_bottom.png" mode="" class="decoration_bottom"></image>
			</view>
		</view>
		<view class="meeting_btns">
			<view class="meeting_btn display_flex" @click="goMourn" v-if="!name">
				<up-icon
					name="plus-circle"
					color="#333333"
					size="18"
					style="margin-right: 8rpx"
				></up-icon>
				选择纪念馆
			</view>
			<view class="meeting_btn display_flex" @click="goMourn" v-else>
				{{ name }}
			</view>
			<view
				class="meeting_btn meeting_btn_2 display_flex"
				key="1"
				@click.native.stop="openTime(1)"
			>
				{{
					meetingData.startTime
						? timeFormatFunc(meetingData.startTime) + ' 开始'
						: '选择追思会开始时间'
				}}
			</view>
			<view
				class="meeting_btn meeting_btn_2 display_flex"
				key="2"
				@click.native.stop="openTime(2)"
			>
				{{
					meetingData.endTime
						? timeFormatFunc(meetingData.endTime) + ' 结束'
						: '选择追思会结束时间'
				}}
			</view>
		</view>

		<footerBtn bgcColor="none" name="确定" @clickBtn="confirmMeeting"></footerBtn>
	</view>

	<!-- 选择开始时间弹框 -->
	<up-datetime-picker
		:closeOnClickOverlay="true"
		:minDate="new Date().getTime()"
		:show="startTime.show"
		v-model="startTime.value"
		mode="datetime"
		:formatter="formatter"
		@cancel="startTime.show = false"
		@confirm="confirmTime($event, 1)"
	></up-datetime-picker>
	<up-datetime-picker
		:closeOnClickOverlay="true"
		:minDate="new Date().getTime()"
		:show="endTime.show"
		v-model="endTime.value"
		mode="datetime"
		:formatter="formatter"
		@cancel="endTime.show = false"
		@confirm="confirmTime($event, 2)"
	></up-datetime-picker>

	<!-- 选择纪念馆弹框 -->
	<chooseMemoryHallPopup
		v-model:show="memoryHallPopup.show"
		:choosedMemo="memoryHallPopup.choosedMemo"
		@confirm="confirmCall"
	></chooseMemoryHallPopup>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import navigatorComp from '/components/navigator/index.vue';
import footerBtn from '/components/footerBtn/index.vue';
import chooseMemoryHallPopup from '/components/popup/chooseMemoryHall.vue';
import { timeFormat } from '@/node_modules/uview-plus';
import HomeApi from '@/API/home/index.js';
const homeApi = new HomeApi();
onLoad((o) => {
	if (o.isEdit) {
		isEdit.value = JSON.parse(o.isEdit);
		homeApi
			.getMemorialServiceInfoApi({
				memorialId: JSON.parse(o.item).memorialId
			})
			.then((res) => {
				memorialId.value = JSON.parse(o.item).memorialId;
				memoryHallPopup.choosedMemo.peopleList = res.data.peopleList;
				name.value = res.data.peopleList.map((item) => item.name).join(',');
				meetingData.startTime = JSON.parse(o.item).startTime;
				meetingData.endTime = JSON.parse(o.item).endTime;
				memorialServiceId.value = JSON.parse(o.item).memorialServiceId;
			});
	}
});
// 开始时间弹框
const startTime = reactive({
	show: false,
	value: ''
});
// 结束时间弹框
const endTime = reactive({
	show: false,
	value: ''
});
//表单数据
const meetingData = reactive({
	startTime: '',
	endTime: ''
});
//纪念馆弹框
const memoryHallPopup = reactive({
	show: false,
	choosedMemo: {},
	memorialList: []
});
let name = ref('');
let memorialServiceId = ref('');
let memorialId = ref('');
let isEdit = ref(false);

/**
 * 点击确定
 */
const confirmMeeting = () => {
	if (meetingData.endTime < meetingData.startTime) {
		uni.showToast({
			icon: 'none',
			title: '结束时间不能小于开始时间'
		});
		return;
	}
	homeApi
		.createMemorialServiceApi({
			startTime: meetingData.startTime,
			endTime: meetingData.endTime,
			memorialId: !isEdit.value ? memoryHallPopup.choosedMemo.memorialId : memorialId.value,
			opType: !isEdit.value ? 1 : 2,
			memorialServiceId: !isEdit.value ? 0 : memorialServiceId.value
		})
		.then((res) => {
			if (isEdit.value) {
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1000);
			} else {
				uni.setStorageSync('memorialId', memoryHallPopup.choosedMemo.memorialId);
				setTimeout(() => {
					goUrl('/subPages/home/memorial_meeting/detail');
				}, 1000);
			}
			uni.showToast({
				icon: 'none',
				title: res.msg
			});
		})
		.catch(() => {});
};

const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};

/**
 * 打开时间弹框
 */
const openTime = (type) => {
	if (type === 1) {
		endTime.show = false;
		startTime.show = true;
	} else {
		startTime.show = false;
		endTime.show = true;
	}
};

/**
 * 确认时间
 */
const confirmTime = (e, type) => {
	console.log(e.value);
	if (type === 1) {
		meetingData.startTime = e.value;
		startTime.show = false;
	} else {
		meetingData.endTime = e.value;
		endTime.show = false;
	}
};

/**
 * 打开纪念馆弹框
 */
const goMourn = () => {
	if (isEdit.value) {
		return;
	}
	memoryHallPopup.show = true;
};

/**
 * 纪念馆弹框-点击确定
 */
const confirmCall = (choosedMemo) => {
	memoryHallPopup.show = false;
	memoryHallPopup.choosedMemo = choosedMemo;
	name.value = choosedMemo.peopleList.map((item) => item.name).join(',');
};

/**
 * 时间格式化
 */
const timeFormatFunc = (date) => {
	return timeFormat(date, 'yyyy年mm月dd日 hh:MM');
};

const formatter = (type, value) => {
	if (type === 'year') {
		return `${value}年`;
	}
	if (type === 'month') {
		return `${value}月`;
	}
	if (type === 'day') {
		return `${value}日`;
	}
	if (type === 'hour') {
		return `${value}时`;
	}
	if (type === 'minute') {
		return `${value}分`;
	}
	return value;
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	box-sizing: border-box;
}

.edit {
	font-weight: 400;
	font-size: 32rpx;
	color: #f3e0bb;
	line-height: 32rpx;
	text-align: right;
}

.content {
	padding: 0;
	height: 100%;
	position: relative;
	// background-image: url('http://112.124.50.179:8888/imgs/home/meeting_bgc1.png');
	background-image: url('http://112.124.50.179:8888/imgs/home/zsh_bg.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 100%;
}

.meeting_bgc {
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: var(--status-bar-height);
	z-index: 0;
}

.meeting_avater {
	position: relative;
	width: 190rpx;
	height: 244rpx;
	margin-top: 164rpx;

	.avater_border {
		position: absolute;
		left: 0;
		top: 0;
		width: 190rpx;
		height: 244rpx;
		z-index: 2;
	}

	.deadee_avater {
		position: absolute;
		width: 170rpx;
		height: 220rpx;
		left: 10rpx;
		top: 10rpx;
		z-index: 1;
	}

	.decoration_top {
		width: 124rpx;
		height: 98rpx;
		position: absolute;
		top: -22rpx;
		right: -40rpx;
		z-index: 2;
	}

	.decoration_bottom {
		width: 148rpx;
		height: 140rpx;
		position: absolute;
		bottom: -24rpx;
		left: -32rpx;
		z-index: 2;
	}
}

.meeting_btns {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	margin-top: 160rpx;

	.meeting_btn {
		width: 510rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		border: 2rpx solid #666666;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 28rpx;
		z-index: 2;
		margin-bottom: 32rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.meeting_btn_2 {
		border: 0;
		box-shadow: 0rpx 0rpx 8rpx 4rpx rgba(212, 198, 179, 0.2);
		border: 2rpx solid #FFFFFF;
	}
}

.memorialList {
	margin: 40rpx 32rpx 0;
	height: 900rpx;

	.memory {
		width: 100%;
		height: 224rpx;
		background: linear-gradient(225deg, #292b2a 0%, #8a918e 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 24rpx 16rpx 24rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}

	image {
		width: 132rpx;
		height: 176rpx;
		border-radius: 7rpx 7rpx 7rpx 7rpx;
		margin-right: 24rpx;
	}

	.name {
		font-weight: 500;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 33rpx;
		width: 100rpx;
	}

	.selectIcon {
		width: 56rpx;
		height: 56rpx;
	}
}

.memory_empty {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	height: 516rpx;
	box-sizing: border-box;

	image {
		width: 330rpx;
		height: 252rpx;
	}

	view {
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 42rpx;
		margin-top: 32rpx;
	}
}

.add_memory_image {
	width: 40rpx;
	height: 40rpx;
	margin-right: 4rpx;
}
</style>
